<template>
  <div class="configMenu">
    <h2 class="editPage">新增</h2>
    <a-card :bordered="true" type="inner" title="菜单管理" style="margin: 15px 0;">
      <a-form :form="form" class="form">
        <a-form-item label="类型" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" class="min-label">
         <a-radio-group :options="options" v-model="postBody.type" @change="levelChange" />
         </a-form-item>
        <a-form-item :label="switchType(postBody.type)+'名称'" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" class="min-label">
          <a-input placeholder="10个字及以内" v-decorator="['title', { rules: [{ required: true, message: '请输入菜单名称' }]}]" @change="nameChange" style="width: 100%" />
        </a-form-item>
        <!-- <a-form-item label="上级菜单" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" class="min-label">
          <a-input placeholder="10个字及以内" disabled v-decorator="['name', { rules: [{ required: true, message: '请输入活动名称' }]}]" @change="parentIdChange" style="width: 100%" />
        </a-form-item> -->
        <a-form-item
          label="上级菜单"
          :labelCol="{xs: {span: 4}}"
          :wrapperCol="{xs: {span: 16}}"
          v-if="postBody.type !== 0"
          class="min-label"
        >
          <a-select placeholder="上级菜单" :allowClear="true" showSearch :filterOption="filterOption" @change="parentIdChange" class="suppierSearch" v-decorator="['pidName', { rules: [{ required: true, message: '请选择上级菜单' }]}]">
              <a-select-option v-for="item of pidList" :key="item.id" :value="item.value">{{ item.title }}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="菜单路径" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" v-if="postBody.type === 1" class="min-label">
          <a-input placeholder="10个字及以内" v-decorator="['path', { rules: [{ required: true, message: '请输入菜单路径' }]}]" @change="pathChange" style="width: 100%" />
        </a-form-item>
        <a-form-item label="别名" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" v-if="postBody.type !== 1" class="min-label">
          <a-input placeholder="10个字及以内" v-decorator="['path', { rules: [{ required: true, message: '请输入菜单路径' }]}]" @change="pathChange" style="width: 100%" />
        </a-form-item>
        <a-form-item label="排序号" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" class="min-label">
          <a-input placeholder="10个字及以内" v-decorator="['menuSort', { rules: [{ required: true, message: '请输入排序号' },{validator: validatNumber}]}]" @change="menuSortChange" style="width: 100%" />
        </a-form-item>
        <a-form-item label="图标" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" v-if="postBody.type === 0" class="min-label">
          <a-input placeholder="10个字及以内" read-only v-decorator="['icon', { rules: [{ required: true, message: '请选择图标' }]}]" @click="iconChange" @enterButton="iconChange" style="width: 100%">
            <a-icon slot="prefix" :type="postBody.icon" />  
          </a-input>
        </a-form-item>
        <a-form-item label="是否缓存" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" v-if="postBody.type === 1" class="min-label">
        <a-radio-group buttonStyle="solid" v-model="postBody.keepAlive">
          <a-radio-button v-for="(item, index) in keepAliveList" :key="index" :value="item.value">{{ item.label }}</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否显示" :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" v-if="postBody.type === 1" class="min-label">
        <a-radio-group buttonStyle="solid" v-model="postBody.isHidden">
          <a-radio-button v-for="(item, index) in isHiddenList" :key="index" :value="item.value">{{ item.label }}</a-radio-button>
        </a-radio-group>
      </a-form-item>
        <a-form-item :labelCol="{xs: {span: 4}}" :wrapperCol="{xs: {span: 16}}" class="min-label">
          <a-button type="primary" class="marginBtn" :loading="loading" @click="editSubmit">确定</a-button>
          <a-button @click="$router.go(-1)" :loading="loading" class="marginBtn">返回</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <icon-selector v-model="currentSelectedIcon" @change="handleIconChange" @iconModalCancel="visible=false" :visible="visible"/>
  </div>
</template>

<script>
import { preventMoreClick, switchType } from "../../utils/filter";
import * as API from "../../api/menu";
import IconSelector from '@/commonComponents/IconSelector'

export default {
  name: "menuEdit",
  components: {
    IconSelector
  },
  data() {
    return {
      form: this.$form.createForm(this),
      currentSelectedIcon: 'pause-circle',
      loading: false,
      visible: false,
      options: [
        { label: '目录', value: 0 },
        { label: '菜单', value: 1 },
        { label: '按钮', value: 2 }
      ],
      keepAliveList: [
        {value: false, label: '否'},
        {value: true, label: '是'}
      ],
      isHiddenList: [
        {value: false, label: '否'},
        {value: true, label: '是'}
      ],
      postBody: {
        title: '',
        path: '',
        icon: '',
        menuSort: '',
        pid: undefined,
        alias: '',
        type: 2,
        isHidden: true,
        keepAlive: false
      },
      pidList: []
    };
  },
  mounted () {
  },
  activated () {
    this.getParentList()
    this.initPage()
    this.postBody.type = 2
    // this.form.setFieldsValue({
    //     naradioGroupme: 2
    //   });
  },
  methods: {
    switchType,
    // getMenuDetialList() {
    //   // 获取菜单信息
    //   let id = this.$route.query.id
    //   API.getMenuDetial(id)
    //     .then(res => {
    //       if (res.code === 200) {
    //         this.postBody = res.data
    //       }
    //     })
    // },
    getParentList () { // 上级菜单列表
    // console.log()
      this.pidList = []
      // let postBody = {
      //   type : this.postBody.type
      // }
      API.getParent(this.postBody.type/1-1)
        .then(res => {
          if (res.code === 200) {
            // console.log(!!res.data.length, res.data.length)
            !!res.data.length && this.countMenu(res.data, this.pidList)
          }
        })
    },
    editSubmit () {
      this.form.validateFields(err => {
        if (!err) {
          preventMoreClick(this, () => { // 防重复点击
          this.loading = true
            this.postBody.alias = this.postBody.path
            API.addMenu(this.postBody)
              .then(res => {
                if (res.code === 200) {
                  this.$message.destroy();
                  this.$message.success("操作成功");
                  this.getMenusList()
                } else {
                  this.loading = false
                }
              }).then(()=>{
                this.loading = false
              })
          });
        }
      });
    },
    getMenusList() {
      // this.pidList = []
      // 更新菜单路由信息
      API.getMenus()
        .then(res => {
          if (res.code === 200) {
            this.loading = false
            // !!res.data.length && this.countMenu(res.data, this.pidList)
            this.$store.dispatch("updateSup", res.data).then(()=>{
              this.$router.go(-1)
            })
          }
        })
    },
    countMenu(list, pidList) {
      list.forEach(item => {
        let obj = {};
        obj.title = item.title;
        obj.value = String(item.id);
        obj.key = item.id;
        // if (item.children) {
        //   obj.children = []
        //   this.countMenu(item.children, obj.children);
        // }
        pidList.push(obj);
      });
    },
    validatNumber (rule, value, callback) {
      const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
      if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
          callback()
        } else {
          callback('需填写数字类型')
        }
    },
    handleIconChange (icon) {
      // console.log('change Icon', icon)
      // this.$message.info(<span>选中图标 <code>{icon}</code></span>)
      this.postBody.icon = icon
      this.visible = false
      this.form.setFieldsValue({
        icon: icon
      })
    },
    nameChange (e) {
      this.postBody.title = e.target.value;
    },
    pathChange (e) {
      this.postBody.path = e.target.value;
    },
    // aliasChange (e) {
    //   this.postBody.alias = e.target.value;
    // },
    iconChange () {
      // this.postBody.icon = e.target.value;
      this.visible = true
      this.currentSelectedIcon = this.postBody.icon
    },
    menuSortChange (e) {
      this.postBody.menuSort = e.target.value;
    },
    parentIdChange (value) {
      this.postBody.pid = value;
      // this.form.setFieldsValue({
      //       menuSort: 'undefined',
      //     })
    },
    // keepAliveChange(value){
    //   this.postBody.keepAlive = value;
    // },
    // isHiddenChange(value){
    //   this.postBody.isHidden = value;
    // },
    levelChange () {
      // this.postBody.type = e.target.value;
      this.getParentList()
      this.initPage()
    },
    initPage () {
      this.form.setFieldsValue({
        title: undefined,
        pidName: undefined,
        path: undefined,
        menuSort: undefined,
        icon: undefined
      })
      this.postBody.title = ''
      this.postBody.path = ''
      this.postBody.icon = ''
      this.postBody.menuSort = ''
      this.postBody.pid = undefined
      this.postBody.alias = ''
      this.postBody.keepAlive = false
      this.postBody.isHidden = true
    },
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
};
</script>

